<template>
	<view class="container">
		<view class="flex diygw-col-24 swipers-clz">
			<swiper class="swiper swiper-indicator_rect_radius" indicator-color="rgba(51, 51, 51, 0.39)" indicator-active-color="rgba(180, 180, 180, 0.93)" indicator-dots="true" interval="3000" circular="true" style="height: 100px">
				<swiper-item class="diygw-swiper-item">
					<view class="diygw-swiper-item-wrap">
						<view class="flex diygw-col-24">
							<view class="diygw-grid col-4">
								<view class="diygw-grid-item">
									<view class="diygw-grid-inner grid1-item-clz">
										<view class="diygw-grid-icon diygw-avatar radius">
											<image mode="aspectFit" class="diygw-avatar-img radius" src="https://lib.diygw.com/static/icon/icon1/icon1_rm.png"></image>
										</view>
										<view class="diygw-grid-title"> 热门 </view>
									</view>
								</view>
								<view class="diygw-grid-item">
									<view class="diygw-grid-inner grid1-item-clz">
										<view class="diygw-grid-icon diygw-avatar radius">
											<image mode="aspectFit" class="diygw-avatar-img radius" src="https://lib.diygw.com/static/icon/icon1/icon1_xsqg.png"></image>
										</view>
										<view class="diygw-grid-title"> 购物车 </view>
									</view>
								</view>
								<view class="diygw-grid-item">
									<view class="diygw-grid-inner grid1-item-clz">
										<view class="diygw-grid-icon diygw-avatar radius">
											<image mode="aspectFit" class="diygw-avatar-img radius" src="https://lib.diygw.com/static/icon/icon1/icon1_yhq.png"></image>
										</view>
										<view class="diygw-grid-title"> 优惠券 </view>
									</view>
								</view>
								<view class="diygw-grid-item">
									<view class="diygw-grid-inner grid1-item-clz">
										<view class="diygw-grid-icon diygw-avatar radius">
											<image mode="aspectFit" class="diygw-avatar-img radius" src="https://lib.diygw.com/static/icon/icon1/icon1_kf.png"></image>
										</view>
										<view class="diygw-grid-title"> 客服 </view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="diygw-swiper-item">
					<view class="diygw-swiper-item-wrap">
						<view class="flex diygw-col-24">
							<view class="diygw-grid col-4">
								<view class="diygw-grid-item">
									<view class="diygw-grid-inner grid3-item-clz">
										<view class="diygw-grid-icon diygw-avatar radius">
											<image mode="aspectFit" class="diygw-avatar-img radius" src="https://lib.diygw.com/static/icon/icon1/icon1_mb.png"></image>
										</view>
										<view class="diygw-grid-title"> 家电 </view>
									</view>
								</view>
								<view class="diygw-grid-item">
									<view class="diygw-grid-inner grid3-item-clz">
										<view class="diygw-grid-icon diygw-avatar radius">
											<image mode="aspectFit" class="diygw-avatar-img radius" src="https://lib.diygw.com/static/icon/icon1/icon1_fz.png"></image>
										</view>
										<view class="diygw-grid-title"> 服装 </view>
									</view>
								</view>
								<view class="diygw-grid-item">
									<view class="diygw-grid-inner grid3-item-clz">
										<view class="diygw-grid-icon diygw-avatar radius">
											<image mode="aspectFit" class="diygw-avatar-img radius" src="https://lib.diygw.com/static/icon/icon1/icon1_mz.png"></image>
										</view>
										<view class="diygw-grid-title"> 帽子 </view>
									</view>
								</view>
								<view class="diygw-grid-item">
									<view class="diygw-grid-inner grid3-item-clz">
										<view class="diygw-grid-icon diygw-avatar radius">
											<image mode="aspectFit" class="diygw-avatar-img radius" src="https://lib.diygw.com/static/icon/icon1/icon1_xsqg.png"></image>
										</view>
										<view class="diygw-grid-title"> 抢购 </view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="flex diygw-col-24 swipers1-clz">
			<swiper class="swiper" indicator-color="rgba(51, 51, 51, 0.39)" indicator-active-color="rgba(180, 180, 180, 0.93)" indicator-dots="true" interval="3000" circular="true" style="height: 100px">
				<swiper-item class="diygw-swiper-item">
					<view class="diygw-swiper-item-wrap">
						<view class="flex diygw-col-24">
							<view class="diygw-grid col-4">
								<view class="diygw-grid-item">
									<view class="diygw-grid-inner grid2-item-clz">
										<view class="diygw-grid-icon diygw-avatar radius">
											<image mode="aspectFit" class="diygw-avatar-img radius" src="https://lib.diygw.com/static/icon/icon1/icon1_rm.png"></image>
										</view>
										<view class="diygw-grid-title"> 热门 </view>
									</view>
								</view>
								<view class="diygw-grid-item">
									<view class="diygw-grid-inner grid2-item-clz">
										<view class="diygw-grid-icon diygw-avatar radius">
											<image mode="aspectFit" class="diygw-avatar-img radius" src="https://lib.diygw.com/static/icon/icon1/icon1_xsqg.png"></image>
											<view class="diygw-tag badge red"> 1 </view>
										</view>
										<view class="diygw-grid-title"> 购物车 </view>
									</view>
								</view>
								<view class="diygw-grid-item">
									<view class="diygw-grid-inner grid2-item-clz">
										<view class="diygw-grid-icon diygw-avatar radius">
											<image mode="aspectFit" class="diygw-avatar-img radius" src="https://lib.diygw.com/static/icon/icon1/icon1_yhq.png"></image>
										</view>
										<view class="diygw-grid-title"> 优惠券 </view>
									</view>
								</view>
								<view class="diygw-grid-item">
									<view class="diygw-grid-inner grid2-item-clz">
										<view class="diygw-grid-icon diygw-avatar radius">
											<image mode="aspectFit" class="diygw-avatar-img radius" src="https://lib.diygw.com/static/icon/icon1/icon1_kf.png"></image>
										</view>
										<view class="diygw-grid-title"> 客服 </view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="diygw-swiper-item">
					<view class="diygw-swiper-item-wrap">
						<view class="flex diygw-col-24">
							<view class="diygw-grid col-4">
								<view class="diygw-grid-item">
									<view class="diygw-grid-inner grid5-item-clz">
										<view class="diygw-grid-icon diygw-avatar radius">
											<image mode="aspectFit" class="diygw-avatar-img radius" src="https://lib.diygw.com/static/icon/icon1/icon1_mb.png"></image>
										</view>
										<view class="diygw-grid-title"> 家电 </view>
									</view>
								</view>
								<view class="diygw-grid-item">
									<view class="diygw-grid-inner grid5-item-clz">
										<view class="diygw-grid-icon diygw-avatar radius">
											<image mode="aspectFit" class="diygw-avatar-img radius" src="https://lib.diygw.com/static/icon/icon1/icon1_fz.png"></image>
										</view>
										<view class="diygw-grid-title"> 服装 </view>
									</view>
								</view>
								<view class="diygw-grid-item">
									<view class="diygw-grid-inner grid5-item-clz">
										<view class="diygw-grid-icon diygw-avatar radius">
											<image mode="aspectFit" class="diygw-avatar-img radius" src="https://lib.diygw.com/static/icon/icon1/icon1_mz.png"></image>
										</view>
										<view class="diygw-grid-title"> 帽子 </view>
									</view>
								</view>
								<view class="diygw-grid-item">
									<view class="diygw-grid-inner grid5-item-clz">
										<view class="diygw-grid-icon diygw-avatar radius">
											<image mode="aspectFit" class="diygw-avatar-img radius" src="https://lib.diygw.com/static/icon/icon1/icon1_xsqg.png"></image>
										</view>
										<view class="diygw-grid-title"> 抢购 </view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="flex diygw-col-24">
			<swiper class="swiper" indicator-color="rgba(51, 51, 51, 0.39)" indicator-active-color="rgba(64, 64, 64, 0.93)" indicator-dots="true" autoplay interval="3000" circular="true" style="height: 150px">
				<swiper-item class="diygw-swiper-item">
					<view class="diygw-swiper-item-wrap">
						<view class="flex flex-wrap diygw-col-24 flex-clz">
							<image src="https://libs.diygw.com/upload/2022/02/13/b0823bce-31e2-48f6-b49d-4b922b62b4a4/1jpg" class="response diygw-col-8 image1-clz" mode="widthFix"></image>
							<view class="flex flex-wrap diygw-col-16 flex-direction-column justify-between flex2-clz">
								<view class="diygw-col-24 diygw-text-md"> Lenovo/联想小新Air14 Plus2021英特尔酷睿i5独显 </view>
								<view class="flex diygw-col-24">
									<view class="diygw-tag margin-xs xs radius-xs bg-gradual-red">
										<text> 3人团 </text>
									</view>
									<view class="diygw-tag margin-xs xs radius-xs bg-gradual-red">
										<text> 已拼999台 </text>
									</view>
								</view>
								<view class="flex diygw-col-24 justify-between">
									<view style="color: rgba(255, 4, 4, 1)" class="diygw-tag margin-xs diygw-capsule">
										<view class="diygw-tag bg-gradual-orange md radius"> 拼 </view>
										<view class="diygw-tag line-gradual-orange radius md"> ¥3698.00 </view>
									</view>
									<view class="diygw-tag margin-xs md radius bg-gradual-red">
										<text> 马上抢 </text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="diygw-swiper-item">
					<view class="diygw-swiper-item-wrap">
						<view class="flex flex-wrap diygw-col-24 flex1-clz">
							<image src="https://libs.diygw.com/upload/2022/02/14/3bcc22df-aa81-4850-9426-aa45ea7bc0ec/wbt-4jpg" class="response diygw-col-8 image2-clz" mode="widthFix"></image>
							<view class="flex flex-wrap diygw-col-16 flex-direction-column justify-between flex4-clz">
								<view class="diygw-col-24 diygw-text-md"> VIP全能升级班 </view>
								<view class="flex diygw-col-24 justify-between">
									<view style="color: rgba(255, 4, 4, 1)" class="diygw-tag margin-xs diygw-capsule">
										<view class="diygw-tag bg-gradual-orange md radius"> 拼 </view>
										<view class="diygw-tag line-gradual-orange radius md"> ¥3698.00 </view>
									</view>
									<view class="diygw-tag margin-xs md radius bg-gradual-red">
										<text> 马上抢 </text>
									</view>
								</view>
								<view class="flex diygw-col-24">
									<view class="diygw-tag margin-xs xs radius-xs bg-gradual-red">
										<text> 3人团 </text>
									</view>
									<view class="diygw-tag margin-xs xs radius-xs bg-gradual-red">
										<text> 已拼999台 </text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="diygw-swiper-item">
					<view class="diygw-swiper-item-wrap">
						<image src="https://libs.diygw.com/upload/2022/02/12/c4c7f8ca-4c3d-40d1-a111-9305fabad17c/diygwjpg" class="response diygw-col-24" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	//create by: 邓志锋 <280160522@qq.com> <https://www.diygw.com> DIYGW可视化设计一键生成源码
	export default {
		data() {
			return {};
		},
		onShareAppMessage: function () {},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: option
				});
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			async init() {}
		}
	};
</script>

<style lang="scss" scoped>
	.swipers-clz {
		margin-left: 5px;
		border-bottom-left-radius: 6px;
		box-shadow: 0px 1px 3px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 5px - 5px) !important;
		border-top-left-radius: 6px;
		margin-top: 5px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.swipers1-clz {
		margin-left: 5px;
		border-bottom-left-radius: 6px;
		box-shadow: 0px 1px 3px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 5px - 5px) !important;
		border-top-left-radius: 6px;
		margin-top: 5px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex-clz {
		margin-left: 8px;
		border-bottom-left-radius: 6px;
		box-shadow: 0px 1px 3px 3px rgba(111, 111, 111, 0.18);
		z-index: 1000;
		overflow: hidden;
		width: calc(100% - 8px - 8px) !important;
		border-top-left-radius: 6px;
		margin-top: 8px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		margin-bottom: 8px;
		margin-right: 8px;
	}
	.image1-clz {
		margin-left: 5px;
		border-bottom-left-radius: 6px;
		overflow: hidden;
		width: calc(33.3333333333% - 5px - 5px) !important;
		border-top-left-radius: 6px;
		margin-top: 5px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex2-clz {
		padding-top: 0px;
		z-index: 1000;
		padding-left: 5px;
		padding-bottom: 0px;
		padding-right: 5px;
	}
	.flex1-clz {
		margin-left: 8px;
		border-bottom-left-radius: 6px;
		box-shadow: 0px 1px 3px 3px rgba(111, 111, 111, 0.18);
		z-index: 1000;
		overflow: hidden;
		width: calc(100% - 8px - 8px) !important;
		border-top-left-radius: 6px;
		margin-top: 8px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		margin-bottom: 8px;
		margin-right: 8px;
	}
	.image2-clz {
		margin-left: 5px;
		border-bottom-left-radius: 6px;
		overflow: hidden;
		width: calc(33.3333333333% - 5px - 5px) !important;
		border-top-left-radius: 6px;
		margin-top: 5px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex4-clz {
		padding-top: 0px;
		z-index: 1000;
		padding-left: 5px;
		padding-bottom: 0px;
		padding-right: 5px;
	}
	.container {
		padding-left: 0px;
		padding-right: 0px;
	}
</style>
